﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<div class=@($"mediumFont ms-GroupHeader{(Compact ? " ms-GroupHeader--compact" : "")}{(!IsOpen ? " is-collapsed" : "")}{(CurrentlySelected ? " is-selected": "")}{(string.IsNullOrEmpty(ClassName) ? "":" " + ClassName)}")
     @onclick=@(OnClick!)
     data-is-focusable="true">
    <FocusZone ClassName="ms-GroupHeader-groupHeaderContainer"
               Direction="FocusZoneDirection.Horizontal">
        @if (IsSelectionCheckVisible)
        {
            <button type="button"
                    class="ms-GroupHeader-check"
                    role="checkbox"
                    aria-checked=@CurrentlySelected
                    data-selection-toggle="true"
                    @onclick=@(OnToggle!)
                    @onclick:stopPropagation="true">
                <Check Checked=@CurrentlySelected />
            </button>
        }
        <GroupSpacer Count=@GroupLevel />

        <div class="ms-GroupHeader-dropIcon">
            <Icon IconName="Tag" />
        </div>
        <button type="button"
                class="ms-GroupHeader-expand"
                @onclick=@OnToggleOpen
                @onclick:stopPropagation="true"
                aria-controls="">
            <Icon ClassName="ms-GroupHeader-expandIsCollapsed" IconName="ChevronRightMed" />
        </button>
        <div class="ms-GroupHeader-title">
            <span>@Name</span>
            <span class="ms-GroupHeader-headerCount">
                (@(Count)@(HasMoreData ? "+" : ""))
            </span>
        </div>

        @*@if (isLoadingVisible)
        {
            <Spinner Label=@LoadingText />
        }*@

    </FocusZone>
</div>